<template>
  <div id="page-index">
    <div class="container">
      <div class="make-page" style="height:100%">
          <div class="title">
            <div>
            </div>
            <div class="title-thanks-div">
              <img src="/mother/static/img/show_title1.png" alt="" class="title-thanks">
            </div>
            <p class="title-intro">亲爱的妈妈，母亲节快乐！</p>
          </div>
          <div class="section">
            <div class="section-title">
              <img :src="imgurl" alt="">
            </div>
            <div class="section-main">
              <p v-text="to" class="toname"></p>
              <p v-text="content" class="content"></p>
              <p v-text="from" class="fromname"></p>
            </div>
          </div>
          <div class="foot">
            <img src="/mother/static/img/show2.png" alt="">
            <span>长按识别二维码立即制作</span>
          </div>
        </div>
        <div class="make-button">
          <span @click="sureDate">生成贺卡</span>
        </div>
      </div>
      
    
  </div>
</template>

<script>
import html2canvas from 'html2canvas';
import {Toast,Indicator } from 'mint-ui';
export default {
  name: 'show',
  data () {
    return {
      to: '致'+this.$store.state.toname,
      content:this.$store.state.content,
      from:decodeURIComponent(this.$store.state.fromname),
      imgurl:this.$store.state.filebase64,
      sid:sessionStorage.getItem('sid'),
      fid:'',
    }
  },
  methods:{
    sendData(...data){
      var _this=this
      function sendText(formTextData){
         return _this.$http.post(_this.httpurl('greetingCardText/addCard'),formTextData);
      }
      function sendFile(formFileData){
        return _this.$http.post(_this.httpurl('greetingcard/addCard'),formFileData);
      }
      this.$http.all([sendText(data[0]), sendFile(data[1])])
        .then(_this.$http.spread(function (r1, r2) {
          // Both requests are now complete
          _this.setData(r1,r2)
        }));
    },
    setData(...data){
      var [cardData,fileData]=data
      console.log(fileData)
      console.log(cardData)
      this.$store.state.allfile=fileData.data.greetingCard
      this.fid=this.$store.state.fid=fileData.data.cid
      this.$store.state.cid=cardData.data.cid
      Indicator.close();
      this.toPageUrl()
    },
    toPageUrl(){
      var _this=this
      this.$router.push({path:'/page',query:{fid:this.fid}})
    },
    sureDate(){
      var page=document.querySelector('.make-page')
      var _this=this
      Indicator.open({
        text: '生成中...',
        spinnerType: 'fading-circle'
      });
      setTimeout(function(){
        html2canvas(page).then(function(canvas) {
          setTimeout(function(){
            //整个图片
            var allCard = canvas.toDataURL("image/png");
            var cardImg=_this.convertBase64UrlToBlob(allCard)
            var formFileData = new FormData()
            formFileData.append("file",cardImg)
            formFileData.append("openId","123")
            formFileData.append("status","1")
            formFileData.append("token",_this.sid)
            //详情
            var upimgfile=_this.convertBase64UrlToBlob(_this.imgurl)
            var formTextData = new FormData()
            formTextData.append("sendto",_this.to)
            formTextData.append("sendfrom",_this.from)
            formTextData.append("cardcontent",_this.content)
            formTextData.append("status","1")
            formTextData.append("openId","123")
            formTextData.append("file",upimgfile)
            formTextData.append("token",_this.sid)	
            // sendText(formTextData,formFileData,loading)
            _this.sendData(formTextData,formFileData,3)
          },1000)
        });
		},1000)       
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
img{font-size: 0px}
.container{
	 background:url('/mother/static/img/bbb.jpg') no-repeat;
	 background-size: 100%;
  width:100vw;
  height: 100vh;
}
.title{
  height: 30vh;
  padding-top:2.5%;
  background:radial-gradient(#cc0033 0%,#990000 50%,#990000 100%);
}
.title-logo{
  width: 20%;
  margin-left:4.5%
}
.title-code{
  width: 10%;
  margin-left:2.5%
}
.title-gz{
   width: 2.3%
}
.title-thanks-div{
  width: 100%;
  text-align: right ;
}
.title-thanks{
  width:50vw;
  margin-right:7vw;
  margin-top: 5%;
}
.title-intro{
  color: #ffffcc;
  font-size: 12px;
  margin-left:10vw;
  margin-top: 10px;
}

.section{
  position: relative;
  box-sizing: border-box;
  padding-left:10vw;
}
.section-title{
  width: 80vw;
  height: 40vw;
  top:-4vh;
  position: relative;
}
.section-title::before{
  content: '';
  background:url('/mother/static/img/show1.png') no-repeat left;
  background-size:cover;
  width: 32vw;
  height: 43vw;
  overflow: hidden;
  left: -3.5vw;
  bottom:-3vw;
  position: absolute;
}
.section-title::after{
  box-sizing: border-box;
  content: 'THANKS MOTHER';
  background-color: #990000;
  width: 52vw;
  height: 5vh;
  line-height: 5vh;
  color:#ffffcc;
  bottom: 0;
  right:-10vw;
  position: absolute;
  padding-left:5vw;
}
.section-title img{
  width: 100%;
  height: 100%;
}
.section-main{
  position: relative;
}
.section::before{
  content:'';
  background: url('/mother/static/img/show4.png') no-repeat center;
  background-size: cover;
  height:42vw;
  width:12vw;
  position: absolute;
  left:0vw;
  top:26vh;
}
.section-main .toname{
  position: relative;
  font-size:18px;
  top:-2vh;
  margin-top: 15px;
}
.section-main .content{
  padding: 0 12vw 0 4vw;
  line-height: 1em;
  word-break: break-all;
  font-size:16px;
}
.section-main .fromname{
  font-size:18px;
  margin-top: 2vh;
  text-align: right;
  font-size: 18px;
  padding-right: 10vw;
}

.foot{
  background: #990000;
  position: absolute;
  bottom: 0;
  text-align: center;
  width: 100%;
  padding: 5px 0;
  color: #fff;
  height: 9vh;
  line-height: 9vh;
}
.foot img{
 width:15vh;
 position: absolute;
 bottom:2vh;
 left:4vw;
}
.foot span{
 margin-left: 30vw
}
.make-button{
	background: rgba(0,0,0,0.5);
  color:#f9f9f9;
  font-size: 20px;
  text-align: center;
  width: 34%;
  left: 33%;
  position: absolute;
  bottom:80px;
  padding: 5px 0px;
  border-radius: 100px;
  font-weight: lighter;
}
</style>
